<template>
  <div class="container">
    <div class="header">
      <div class="title">
        <p>取样检测机器人系统</p>
      </div>
      <div class="time">
        <p>{{ currentTime }}</p>
        <img src="../images/qing.png" alt="" v-if="this.weatherStatus == 1">
        <img src="../images/xiayu.png" alt="" v-else-if="this.weatherStatus == 0">
      </div>
    </div>
    <div class="center">
      <LeftView></LeftView>
      <MiddleView ref="childComponent"></MiddleView>
      <RightView></RightView>
    </div>
  </div>
</template>
<script>
import LeftView from './components/LeftView/index.vue'
import MiddleView from './components/MiddleView/index.vue'
import RightView from './components/RightView/index.vue'
import { GetWeather } from '@/api/cyRobot/home'
export default {
  components: {
    LeftView,
    MiddleView,
    RightView
  },
  data() {
    return {
      currentTime: this.getCurrentTime(),
      weatherStatus: ''
    };
  },
  mounted() {
    this.currentTime = this.getCurrentTime();
    this.getWeather()
  },
  methods: {    
    //获取天气信息
    getWeather() {
      GetWeather().then(response => {
        this.weatherStatus = response.data.isSun
      })
    },
    //获取当前时间
    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = this.padNumber(now.getMonth() + 1);
      const day = this.padNumber(now.getDate());
      const hours = this.padNumber(now.getHours());
      const minutes = this.padNumber(now.getMinutes());
      const seconds = this.padNumber(now.getSeconds());
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    padNumber(num) {
      return num < 10 ? '0' + num : num;
    }
  },
  beforeDestroy() {
    // 清除定时器以避免内存泄漏
    //clearInterval(this._intervalId);
  }
}
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background-image: url(../images/beijin.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .header {
    width: 100%;
    height: 50px;
    background-image: url(../images/head.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .title {
      height: 50px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      font-size: 46px;
      color: #FFFFFF;
      font-style: italic;
      background: linear-gradient(0deg, #2E74C2 0%, #F3F6F0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .time {
      position: absolute;
      right: 15px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      display: flex;
      align-items: center;

      >img {
        width: 25px;
        height: 20px;
        margin-left: 6px;
      }
    }
  }

  .center {
    width: 100%;
    height: calc(100vh - 40px - 50px);
    //background-color: rgb(96, 248, 200);
    display: flex;
  }
}
</style>